<template>
  <div class="container">
    <scroll-view scroll-y="true" style="height: 100vh;">
      <div class="mainContent">
        <div class="headers">
          <div class="left">我的学生</div>
          <div class="right">
            <div class="label">总注册人数</div>
            <div class="num"><span>{{ studentData.volumeNumber || 0 }}</span>/人</div>
          </div>
        </div>
        <div class="studentMsg">
          <div class="singleStudentType" @click="handleIntoMyStudentList('all')">
            <div class="left allStudent">
              <div class="typeIcon">
                <img src="/static/images/icon_2.png" alt="">
              </div>
              <div class="msgShow">
                <div class="showTitle">已注册学生</div>
                <div class="showNum"><span>{{ studentData.volumeNumber || 0 }}</span>/人</div>
              </div>
            </div>
            <div class="right"></div>
          </div>
          <div class="singleStudentType" @click="handleIntoMyStudentList('isActive')">
            <div class="left isActive">
              <div class="typeIcon"></div>
              <div class="msgShow">
                <div class="showTitle">已激活学生</div>
                <div class="showNum"><span>{{ studentData.activateNumber || 0 }}</span>/人</div>
              </div>
            </div>
            <div class="right"></div>
          </div>
          <div class="singleStudentType" @click="handleIntoMyStudentList('notActive')">
            <div class="left notActive">
              <div class="typeIcon"></div>
              <div class="msgShow">
                <div class="showTitle">未激活学生</div>
                <div class="showNum"><span>{{ studentData.notActivatedNumber || 0 }}</span>/人</div>
              </div>
            </div>
            <div class="right"></div>
          </div>
        </div>
        <div class="dataAnalysis">
          <div class="dataTitle">数据分析</div>
          <div class="dataList">
            <div class="dataItem">
              <div class="left">
                <img class="circleIcon" src="/static/images/double_circle.png" alt="">
                <div class="title">生涯测评</div>
              </div>
              <div class="right"></div>
            </div>
            <div class="dataItem">
              <div class="left">
                <img class="circleIcon" src="/static/images/double_circle.png" alt="">
                <div class="title">选科选课</div>
              </div>
              <div class="right"></div>
            </div>
            <div class="dataItem">
              <div class="left">
                <img class="circleIcon" src="/static/images/double_circle.png" alt="">
                <div class="title">升学路径</div>
              </div>
              <div class="right"></div>
            </div>
            <div class="dataItem">
              <div class="left">
                <img class="circleIcon" src="/static/images/double_circle.png" alt="">
                <div class="title">志愿填报</div>
              </div>
              <div class="right"></div>
            </div>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      studentData: {}
    }
  },
  mounted () {
    this.getStatistics()
  },
  onShow () {
    wx.removeStorageSync('searchConditionObj')
    wx.removeStorageSync('isInSearchCondition')
    wx.removeStorageSync('searchInput')
  },
  methods: {
    // 获取注册人数、激活人数与未激活人数
    getStatistics () {
      this.$httpWX.post({
        url: '/academy/teacher/getStatistics',
        header: {
          'content-type': 'application/json', // 默认值
          'accessToken': wx.getStorageSync('tokens')
        }
      }).then(res => {
        this.studentData = res.data
      })
    },
    handleIntoMyStudentList (type) {
      // type:  isActive --> 已激活   notActive --> 未激活   all --> 全部学生
      const url = '../myStudentList/main?activeType=' + type
      wx.navigateTo({ url: url })
    }
  }
}
</script>

<style lang="less" scoped>
  .mainContent {
    padding: 0 30rpx 50rpx;
    box-sizing: border-box;
    .headers {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      width: 100%;
      margin-bottom: 30rpx;
      .left {
        color: #171717;
        font-size: 40rpx;
        font-weight: bold;
      }
      .right {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .label {
          color: #999;
          font-size: 26rpx;
          margin-right: 18rpx;
        }
        .num {
          padding: 0 11rpx;
          height: 40rpx;
          border-radius: 20rpx;
          font-size: 18rpx;
          font-weight: bold;
          background: #FFAD0D;
          color: #fff;
          span {
            font-size: 26rpx;
          }
        }
      }
    }
    .studentMsg {
      margin-bottom: 28rpx;
      .singleStudentType {
        width: 100%;
        height: 150rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1rpx solid #E5E5E5;
        border-radius: 10rpx;
        padding: 0 30rpx 0 34rpx;
        box-sizing: border-box;
        margin-bottom: 24rpx;
        .left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .typeIcon {
            width: 110rpx;
            height: 110rpx;
            margin-right: 59rpx;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .msgShow {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .showTitle {
              color: #171717;
              font-size: 30rpx;
              font-weight: bold;
              margin-right: 51rpx;
              width: 230rpx;
            }
            .showNum {
              font-size: 18rpx;
              font-weight: bold;
              span {
                font-size: 36rpx;
              }
            }
          }
        }
        .isActive {
          .typeIcon {
            background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -880rpx -1890rpx;
            background-size: 746rpx 350rpx;
          }
          .msgShow .showNum { color: #FFAD0D; }
        }
        .notActive {
          .typeIcon {
            background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -755rpx -1890rpx;
            background-size: 746rpx 350rpx;
          }
          .msgShow .showNum { color: #999; }
        }
        .right {
          width: 36rpx;
          height: 36rpx;
          background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -1170rpx -2011rpx;
          background-size: 746rpx 350rpx;
        }
      }
    }
    .dataAnalysis {
      .dataTitle {
        height: 100rpx;
        width: 100%;
        color: #171717;
        line-height: 100rpx;
        font-size: 40rpx;
        font-weight: bold;
      }
      .dataItem {
        width: 100%;
        height: 110rpx;
        border: 1rpx solid #E5E5E5;
        border-radius: 10rpx;
        padding: 0 30rpx 0 34rpx;
        margin-bottom: 29rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .circleIcon {
            width: 26rpx;
            height: 26rpx;
            margin-right: 20rpx;
          }
          .title {
            color: #171717;
            font-size: 30rpx;
            font-weight: bold;
          }
        }
        .right {
          width: 36rpx;
          height: 36rpx;
          background: url('https://static.shengxue985.com/sxzx_miniprogram/teacher/css_sprites.png') -1170rpx -2011rpx;
          background-size: 746rpx 350rpx;
        }
      }
    }
  }
</style>